import React, { useMemo } from 'react';
import VirtualList from '../../components/pages/Home/VirtualList/index';

const Index = () => {
  // 生成测试数据
  const testData = useMemo(() => {
    return Array.from({ length: 100 }, (_, index) => ({
      id: index,
      title: `测试项目 ${index + 1}`,
      thumbnail: index % 3 === 0 ? 'img1;img2;img3' : 'img1',
      description: `这是第 ${index + 1} 个测试项目的详细描述信息...`
    }));
  }, []);

  // 动态高度计算
  const getItemHeight = (item: any) => {
    const imgLength = item.thumbnail.split(';').length;
    return imgLength >= 3 ? 120 : 100;
  };

  // 渲染单个项目
  const renderItem = (item: any, index: number) => (
    <div style={{
      padding: '15px',
      borderBottom: '1px solid #eee',
      backgroundColor: 'white',
      height: '100%',
      boxSizing: 'border-box'
    }}>
      <div style={{ fontWeight: 'bold', marginBottom: '8px' }}>
        {item.title}
      </div>
      <div style={{ color: '#666', fontSize: '14px' }}>
        {item.description}
      </div>
      <div style={{ marginTop: '8px', color: '#999', fontSize: '12px' }}>
        图片数量: {item.thumbnail.split(';').length}
      </div>
    </div>
  );

  return (
    <div style={{ padding: '20px' }}>
      <h2>虚拟列表测试</h2>
      <p>共 {testData.length} 条数据，支持动态高度</p>
      
      <VirtualList
        data={testData}
        getItemHeight={getItemHeight}
        containerHeight={400}
        renderItem={renderItem}
        overscan={2}
      />
    </div>
  );
};

export default Index;
